<!--
 * @Author: dudu
 * @Date: 2022-06-02 10:54:39
 * @LastEditors: dudu
 * @LastEditTime: 2022-06-11 10:10:54
 * @Description: 
-->
<template>
  <div id="app" class="activity-page">
    <div class="loading" v-show="loading">
      <div class="loading-i">
        <i class="el-icon el-icon-loading"></i>
      </div>
    </div>

    <div class="activity-con">

      <div class="act-banner">
        <!-- webbanner -->
        <img class="web-banner" src="@/assets/618/images/banner.png" alt="" />
        <!-- movebanner -->
        <img class="move-banner" src="@/assets/618/images/banner_m.png" alt="" />
      </div>
      <div class="act-panel panel-intro">
        <p class="web-intro">今年的618，小研带着贴心优惠如约而至啦！不用守着时钟熬夜，也无需掐着整点抢购。</p>
        <div class="move-intro">
          <p>今年的618，</p>
          <p>小研带着贴心优惠</p>
          <p>如约而至啦！</p>
          <p>不用守着时钟熬夜，</p>
          <p>也无需掐着整点抢购。</p>
        </div>
        <img class="intro-img" src="@/assets/618/images/intro_text.png" alt="" />
        <div class="intro-tag">活动时间：6月13日--6月27日</div>
        <img class="move-banner" src="@/assets/618/images/banner2_m.png" alt="" />
      </div>
      <div class="act-panel">
        <h3>活动内容</h3>
        <ul class="intro-ul">
          <li>
            <div class="intro-con">
              <img class="intro-order" src="@/assets/618/images/order1.png" alt="" />
              <div class="intro-text">
                <p>活动期间知网研学个人会员部分版本限时<span class="cr">9折</span>，您可前往会员详情页进行开通。</p>
                <p class="p-tip">(参与商品包含：高校版年度会员，标准初级版年度会员，标准高级版年度会员，标准畅享版年度会员，尊享版季度和年度会员)</p>
              </div>
            </div>
            <div class="btn-con">
              <img src="@/assets/618/images/btn1.png" alt="" @click="gotoMember()" />
            </div>
          </li>
          <li>
            <div class="intro-con">
              <img class="intro-order" src="@/assets/618/images/order2.png" alt="" />
              <div class="intro-text">
                <div class="web-show">
                  <p>活动期间可参与<span class="cr">抽奖，获取优惠券</span>。限定免单券，5折券等你来解锁！<span class="cr">购买会员更优惠！</span></p>
                </div>
                <div class="move-show">
                  <p>活动期间可参与<span class="cr">抽奖，获取优惠券</span>。</p>
                  <p>限定免单券，5折券等你来解锁！</p>
                  <p><span class="cr">购买会员更优惠！</span></p>
                </div>
              </div>
            </div>
            <div class="btn-con">
              <img src="@/assets/618/images/btn2.png" alt="" @click="openGiftDialog()" />
            </div>
          </li>
        </ul>
      </div>
      <div class="act-panel">
        <h3>活动规则</h3>
        <ul class="rule-ul">
          <li>①.活动期间，首次抽奖后，分享活动页面可额外获得1次抽奖机会，奖品由系统随机发放，可以到个人中心-我的卡券查看；</li>
          <li>②.活动期间，抽到的优惠券可与参与优惠的会员版本叠加使用，但优惠券不能多张同时叠加使用，一个订单只能用1张；</li>
          <li>③.抽中奖品后，请及时前往“知网研学—个人中心—我的卡券”中查看，注意优惠券的使用时间、使用范围、使用规则。</li>
        </ul>
      </div>
      <div class="act-footer">
        <p>本次活动最终解释权归属《中国学术期刊（光盘版）》电子杂志社有限公司</p>
        <p>© 1998-2022 中国知网（CNKI）</p>
      </div>
    </div>
    <!-- 翻牌弹层 -->
    <div v-show="giftDialog" class="gift-pop">
      <div class="gift-pop-con">
        <!-- 有抽奖机会，翻牌前展示 -->
        <div class="gift-open" v-show="giftOpen">
          <img class="gift-img" src="@/assets/618/images/gift_pic.png" alt="" @click="openGift()" />
          <img class="gift-text" src="@/assets/618/images/gift_text.png" alt="" />
          <!-- 关闭按钮 -->
          <span class="close-i" @click="giftDialog=false">
            <i class="el-icon el-icon-circle-close"></i>
          </span>
        </div>
        <!-- 没有抽奖机会，但是还可以分享 -->
        <div v-show="shareDialog" class="gift-result">
          <!-- 无抽奖机会 -->
          <div class="gift-null">
            <div class="gift-detail">
              <p class="limit-num share-tips">{{shareTips}}</p>
            </div>
          </div>

          <!-- web端分享按钮 -->
          <div class="web-show" v-show="!isMobile">
            <div class="share-box">
              <span>分享到：</span>
              <ul class="share-ul">
                <li @click="shareUrl()">
                  <img src="@/assets/618/images/i_link.png" alt="" />
                  <span>复制为链接</span>
                </li>
                <li @click="clickShareLink();shareTarget='微信'">
                  <img src="@/assets/618/images/i_weixin.png" alt="" />
                  <span>分享至微信</span>
                </li>
                <li @click="clickShareLink();shareTarget='QQ'">
                  <img src="@/assets/618/images/i_qq.png" alt="" />
                  <span>分享至QQ</span>
                </li>
                <li @click="clickShareLink();shareTarget='微博'">
                  <img src="@/assets/618/images/i_weibo.png" alt="" />
                  <span>分享至微博</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- 移动端分享按钮 -->
          <div v-show="isMobile" class="move-show">
            <a class="share-btn" @click="clickShareLink()">分享到</a>
          </div>
          <!-- 关闭按钮 -->
          <span class="close-i" @click="giftDialog=false">
            <i class="el-icon el-icon-circle-close"></i>
          </span>
        </div>

        <!-- 无抽奖机会，也不能分享 -->
        <div v-show="cantShareDialog" class="gift-result">
          <!-- 无抽奖机会 -->
          <div class="gift-null">
            <div class="gift-detail">
              <p class="limit-num">抽奖机会已用完！</p>
            </div>
          </div>
          <!-- web端分享按钮 -->
          <div v-show="!isMobile" class="web-show">
            <div class="share-box">
              <span>分享到：</span>
              <ul class="share-ul">
                <li @click="shareUrl()">
                  <img src="@/assets/618/images/i_link.png" alt="" />
                  <span>复制为链接</span>
                </li>
                <li @click="clickShareLink();shareTarget='微信'">
                  <img src="@/assets/618/images/i_weixin.png" alt="" />
                  <span>分享至微信</span>
                </li>
                <li @click="clickShareLink();shareTarget='QQ'">
                  <img src="@/assets/618/images/i_qq.png" alt="" />
                  <span>分享至QQ</span>
                </li>
                <li @click="clickShareLink();shareTarget='微博'">
                  <img src="@/assets/618/images/i_weibo.png" alt="" />
                  <span>分享至微博</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- 移动端分享按钮 -->
          <div v-show="isMobile" class="move-show">
            <a class="share-btn" @click="clickShareLink()">分享到</a>
          </div>
          <!-- 关闭按钮 -->
          <span class="close-i" @click="giftDialog=false">
            <i class="el-icon el-icon-circle-close"></i>
          </span>
        </div>

        <!-- 翻牌后展示 giftResult-->
        <div v-show="giftResult" class="gift-result">
          <!-- 有奖品 -->
          <div v-show="!giftNull" class="gift-box">
            <h3>恭喜获得</h3>
            <div class="gift-detail">
              <p v-show="giftInfo[giftType]&&giftInfo[giftType].n" class="limit-num">{{giftInfo[giftType]&&giftInfo[giftType].n}}</p>
              <p v-show="giftInfo[giftType]&&giftInfo[giftType].t" class="limit-text">{{giftInfo[giftType]&&giftInfo[giftType].t}}</p>

              <!-- web端显示去领奖品按钮 -->
              <a v-show="!isMobile&&giftType!=-1&&giftType!=4" href="javascript:;" class="gift-a" @click="gotoGift()">去领奖品</a>
              <!-- 移动端显示提示语 -->
              <p v-show="isMobile&&giftType!=-1&&giftType!=4" class="gift-tip">电脑登录知网研学--个人中心--我的卡券，查看使用</p>
            </div>
          </div>
          <!-- 无奖品 -->
          <div v-show="giftNull" class="gift-null">
            <div class="gift-detail">
              <p class="limit-num">谢谢参与！</p>
            </div>
          </div>

          <p class="share-tip">{{shareTips}}</p>
          <!-- web端分享按钮 -->
          <div v-show="!isMobile" class="web-show">
            <div class="share-box">
              <span>分享到：</span>
              <ul class="share-ul">
                <li @click="shareUrl()">
                  <img src="@/assets/618/images/i_link.png" alt="" />
                  <span>复制为链接</span>
                </li>
                <li @click="clickShareLink();shareTarget='微信'">
                  <img src="@/assets/618/images/i_weixin.png" alt="" />
                  <span>分享至微信</span>
                </li>
                <li @click="clickShareLink();shareTarget='QQ'">
                  <img src="@/assets/618/images/i_qq.png" alt="" />
                  <span>分享至QQ</span>
                </li>
                <li @click="clickShareLink();shareTarget='微博'">
                  <img src="@/assets/618/images/i_weibo.png" alt="" />
                  <span>分享至微博</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- 移动端分享按钮 -->
          <div v-show="isMobile" class="move-show">
            <a class="share-btn" @click="clickShareLink()">分享到</a>
          </div>
          <!-- 关闭按钮 -->
          <span class="close-i" @click="giftDialog=false">
            <i class="el-icon el-icon-circle-close"></i>
          </span>
        </div>
      </div>
    </div>
    <!-- 移动端分享弹层 showMobileSharePop-->
    <div v-show="showMobileSharePop" class="share-pop" @click="clickMobileSharePop()">
      <div class="cus-title">
        <!-- <span class="back-i" @click="showMobileSharePop=false">
          <i class="iconfont icon-toleft"></i>
        </span>
        <span>知网研学，618等你来翻“牌”</span>
        <span class="share-i">
          <i class="iconfont icon-fenxiang"></i>
        </span> -->
      </div>
      <div class="share-con">
        <p>点击图标分享给好友</p>
      </div>
    </div>

    <!-- 二维码层 v-show="webSharePop"   class="share-pop"-->
    <div v-show="webSharePop" class="modal-page">
      <div class="modal-content">
        <div class="modal-center code">
          <div class="modal-header">
            <div class="title">分享</div>
            <!-- 关闭按钮 -->
            <span class="close-i" @click="webSharePop=false">
              <i class="el-icon el-icon-close"></i>
            </span>
          </div>
          <div class="modal-intro">
            <div id="qrcode" class="code-img">
              <canvas width="256" height="256" style="display: none;"></canvas>
              <img v-if="environment=='xtest'" src="@/assets/618/images/QR_code_xtest.png" style="display: block;">
              <img v-else src="@/assets/618/images/QR_code_x.png" style="display: block;">

            </div>
            <div class="intro">打开{{shareTarget}}，扫描上方二维码</div>
          </div>
        </div>
      </div>
    </div>

    <div class="cus-tip-con" v-show="msgBox.show">
      <!-- 提示语 ，成功加.tip-success，失败加tip-error，警告tip-warn-->
      <p :class="['tip-color',msgBox.type=='success'? 'tip-success':(msgBox.type=='error'?'tip-error':'tip-warn')]">{{msgBox.msg}}</p>
    </div>
  </div>
</template>
<script>
import { activityDrawNums, draw, reDrawNums, dealDrawNums } from '../../api/618'
import apiconfig from '@/api/apiConfig'

export default {
  components: {},
  data() {
    return {
      environment: 'x',
      activityId: '8a81fa118118d994018136d348110026', // 活动id
      loading: false,
      shareDialog: false, // 没有抽奖机会，但是还可以分享
      cantShareDialog: false, // 不能分享弹窗
      giftDialog: false, // 抽奖会话弹窗
      giftOpen: false, // 抽奖界面
      giftResult: false, // 抽奖结果
      giftNull: false, // 否是抽到奖品
      giftType: -2,
      giftInfo: {
        '-1': { n: '', t: '谢谢参与' },
        0: { n: '', t: '立减15元 优惠券' },
        1: { n: '', t: '满200减30元 优惠券' },
        2: { n: '', t: '9折 优惠券' },
        3: { n: '满198-197.9优惠券', t: '【限高校版（包年）使用】' },
        4: { n: '', t: '谢谢参与' },
        5: { n: '', t: '5折 优惠券' },
      },
      drawNums: 0, // 抽奖次数
      isShare: 0, // 是否分享过
      shareTips: '点击分享，还可获取1次抽奖机会！',
      showMobileSharePop: false, // 移动端分享弹层
      webSharePop: false, // web端分享弹层
      shareTarget: '微信', // 分享对象
      msgBox: {
        // 提示弹窗
        show: false,
        type: 'success', // success error warning
        msg: '',
      },
    }
  },
  computed: {
    isMobile() {
      var mobile = window.navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
      return mobile
    },
  },
  methods: {
    showMsgBox(msg, type) {
      let _self = this

      this.msgBox.show = true
      this.msgBox.type = type
      this.msgBox.msg = msg

      setTimeout(() => {
        _self.msgBox.show = false
      }, 3000)
    },
    shareUrl() {
      copyUrl(window.location.href)
      this.showMsgBox('复制成功', 'success')
      this.addDrawNums()
    },
    clickMobileSharePop() {
      this.showMobileSharePop = false
      window.location.reload()
    },
    showSharePop() {
      if (this.isMobile) {
        // app、微信、qq增加引导图，其他环境复制页面连接
        let ua = window.navigator.userAgent.toLowerCase()
        //console.log(ua)
        if (
          ua.match(/MicroMessenger/i) == 'micromessenger' ||
          ua.match(/QQ/i) == 'qq' ||
          ua.match(/psmc/i) == 'psmc'
        ) {
          this.showMobileSharePop = true
        } else {
          // 复制当前页面连接
          copyUrl(window.location.href)
          this.showMsgBox('复制成功', 'success')
        }
      } else {
        this.webSharePop = true
      }
    },
    gotoGift() {
      window.open(`${apiconfig.SSO_HOST}/account/app.html#/account`, '_self')
    },
    gotoMember() {
      let _self = this
      if (this.isMobile) {
        let ua = window.navigator.userAgent.toLowerCase()
        //console.log(ua)
        if (ua.match(/psmc/i) == 'psmc') {
          window.open(
            `psmc://x.cnki.net/personalCenter/vipProductCenter`,
            '_self'
          )
        } else {
          try {
            window.open(`psmc://`, '_self')

            let userAgentInfo = window.navigator.userAgent
            var isAndroid =
              userAgentInfo.indexOf('Android') > -1 ||
              userAgentInfo.indexOf('Linux') > -1 //Android
            var isIOS = !!userAgentInfo.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
            var isIPad = userAgentInfo.indexOf('iPad') > -1 //是否iPad
            var isIPhone =
              userAgentInfo.indexOf('iPhone') > -1 ||
              userAgentInfo.indexOf('Mac') > -1 //iPhone

            setTimeout(function () {
              try {
                if (isAndroid) {
                  //Android
                  window.location.href =
                    'https://a.app.qq.com/o/simple.jsp?pkgname=cnki.net.psmc'
                } else if (isIOS || isIPhone) {
                  //iPhone
                  window.location.href =
                    'https://itunes.apple.com/cn/app/apple-store/id1459607218'
                } else {
                  window.open('/search/home?value=4', '_blank')
                }
              } catch (error) {
                console.error(error)
                window.open('/search/home?value=4', '_blank')
              }
            }, 3000)

            setTimeout(function () {
              _self.showMsgBox(
                '请电脑登录知网研学x.cnki.net 查看购买',
                'success'
              )
            }, 5000)
          } catch (error) {
            console.error(error)
            window.open('/search/home?value=4', '_blank')
          }
        }
      } else {
        window.open('/search/home?value=4', '_blank')
      }
    },
    openGiftDialog() {
      if (!window.userId) {
        let returnUrl = window.location.origin + window.location.pathname
        let newHref =
          apiconfig['YX_WEB'] +
          '/search/common/login?returnUrl=' +
          returnUrl +
          '?appId=' +
          apiconfig['appid']
        window.location.href = newHref
        return
      }

      let _self = this

      _self.giftOpen = false
      _self.giftResult = false
      _self.giftNull = false
      _self.shareDialog = false
      _self.cantShareDialog = false
      _self.giftDialog = false

      this.getDrawNums().then(() => {
        if (_self.drawNums == 0 && _self.isShare == 0) {
          _self.shareTips = '点击分享，还可获取1次抽奖机会！'
          _self.shareDialog = true
        } else if (_self.drawNums == 0 && _self.isShare == 1) {
          _self.shareTips = ''
          _self.cantShareDialog = true
        } else {
          _self.giftOpen = true
        }

        _self.giftDialog = true
      })
    },
    openGift() {
      let _self = this
      _self.loading = true
      _self.giftType = -2
      //抽奖
      var params = {
        activityId: this.activityId,
        userId: window.userId,
      }
      draw(params).then(
        (res) => {
          //console.log(res)
          _self.loading = false
          if (res.Code == 200 && res.Data && res.Data.Result != false) {
            _self.giftNull = false
            _self.giftType = res.Data.Result
          } else {
            _self.giftNull = true
          }
          _self.giftResult = true
          _self.giftOpen = false

          if (_self.isShare == 0) {
            _self.shareTips = '点击分享，还可获取1次抽奖机会！'
          } else {
            _self.shareTips = ''
          }

          //重置抽奖次数
          _self.subDrawNums()
        },
        (err) => {
          console.error(err)
          _self.giftNull = true
          _self.loading = false
          _self.showMsgBox('服务器错误，请稍后刷新重试', 'error')
        }
      )
    },
    async getDrawNums() {
      this.drawNums = 0
      let _self = this
      _self.loading = true
      var params = {
        activityId: this.activityId,
        userId: window.userId,
      }
      return activityDrawNums(params).then(
        (res) => {
          //console.log(res)
          _self.loading = false
          if (res && res.success && res.content) {
            _self.drawNums = res.content.drawNums
            _self.isShare = res.content.isShare
          }
        },
        (err) => {
          _self.loading = false
          console.error(err)
          _self.showMsgBox('服务器错误，请稍后刷新重试', 'error')
        }
      )
    },
    addDrawNums() {
      let _self = this
      _self.loading = true
      // this.drawNums++
      var params = {
        activityId: this.activityId,
        userId: window.userId,
      }
      dealDrawNums(params).then(
        (res) => {
          //console.log(res)
          _self.loading = false
          if (res && res.success) {
            _self.getDrawNums()
            _self.shareTips = '分享成功，您还有1次抽奖机会!'
            _self.showMsgBox('分享成功', 'success')
          } else {
            _self.showMsgBox('分享失败', 'error')
          }
        },
        (err) => {
          _self.loading = false
          console.error(err)
          _self.showMsgBox('服务器错误，请稍后刷新重试', 'error')
          _self.showMsgBox('分享成功', 'success')
        }
      )
    },
    subDrawNums() {
      let _self = this
      _self.loading = true
      // this.drawNums--
      var params = {
        activityId: _self.activityId,
        userId: window.userId,
      }
      reDrawNums(params).then(
        (res) => {
          //console.log(res)
          _self.loading = false
          if (res && res.success) {
            _self.getDrawNums()
          }
        },
        (err) => {
          console.error(err)
          _self.showMsgBox('服务器错误，请稍后刷新重试', 'error')
        }
      )
    },
    clickShareLink() {
      this.showSharePop()
      this.addDrawNums()
    },
    checkLogin() {
      return !!window.userId
    },
  },
  mounted() {
    // var token = getCiookie()
    if (window.location.host.toLowerCase().match(/xtest./) == 'xtest.') {
      this.environment = 'xtest'
    }
    //console.log(apiconfig.SSO_HOST)
  },
}

function getCiookie() {
  let key = 'AID'
  if (window.location.origin.includes('dev.') == false) {
    key = 'LID'
  }
  const token = document.cookie.match(`[;s+]?${key}=([^;]*)`)?.pop()
  return token ?? key
}

function copyUrl(url) {
  var input = document.createElement('input')
  document.body.appendChild(input)
  input.setAttribute('value', url)
  input.select()
  document.execCommand('copy') // 执行浏览器复制命令
  if (document.execCommand('copy')) {
    document.execCommand('copy')
    console.log('复制成功')
  }
  document.body.removeChild(input)
}
</script> 
